<template>
  <div>
    <myheader></myheader>
    <van-tabs v-model="active">
      <van-tab title="用户名登录">
        <van-form>
          <van-field
            v-model="form.username"
            name="username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="form.password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px">
            <van-button round block type="info" name='button1' native-type="submit" @click="login1" id="button1"
              >登录</van-button
            >
          </div>
        </van-form>
      </van-tab>
      <van-tab title="手机号登录">
        <van-form>
          <van-field
            v-model="mobile"
            name="mobile"
            label="手机号"
            placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
          />
          <van-count-down :time="time" @finish='finish' ref="countDown" v-show="show" format='还剩ss秒' :auto-start='false'/>
          <van-button round type="info" @click="send_sms" name='button2'
            >发送验证码</van-button
          >
          <van-field
            v-model="codes"
            name="codes"
            label="验证码"
            placeholder="验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
          />
          <div style="margin: 16px">
            <van-button
              round
              block
              type="info"
              native-type="submit"
              @click="login2"
              name='button3'
              >登录</van-button
            >
          </div>
        </van-form>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import myheader from './myheader.vue';
export default {
  data() {
    return {
      active: 1,
      form: {},
      mobile: "",
      codes: "",
      time:60000,
      show:false
    };
  },
  methods: {
    //发送短信
    send_sms() {
      this.$axios.post("/users/login", { mobile: this.mobile }).then((res) => {
        if (res.data.code == 200) {
          alert("发送成功")
          this.show = true
          this.$refs.countDown.start()
          ;
        } else {
          alert(res.data.mes);
        }
      });
    },
    finish(){
      this.show = false
      this.$refs.countDown.reset()

    },
    //用户名登录
    login1(){
      this.$axios.post('/users/login1',this.form)
      .then(res=>{
        if(res.data.code==200){
          alert('登录成功')
          localStorage.setItem('userid',res.data.userid)
          localStorage.setItem('token'.res.data.token)
          localStorage.setItem('username'.res.data.username)
          this.$router.push('/user_info')
        }
        else{
          this.$toast.fail(res.data.mes)
        }
      })
    },
    //手机号登录
    login2() {
      this.$axios
        .post("/users/login2", { mobile: this.mobile, codes: this.codes })
        .then((res) => {
          if (res.data.code == 200) {
            alert("登录成功")
            localStorage.setItem('userid',res.data.userid)
            localStorage.setItem('token',res.data.token)
            localStorage.setItem('username',res.data.username)
            this.$router.push('/user_info')
          }
          else{
              this.$toast.fail(res.data.mes)
          }
        });
    },
  },
  components:{
    'myheader':myheader
  }
};
</script>

<style scoped>
</style>